<nz-spin [nzTip]="'正在提交数据...'" [nzSpinning]="nzSpinning">
  <div class="carouselAdd">
    <form nz-form [formGroup]="validateForm" class="login-form">
      <!--所属端(电脑、手机)-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="8">
          <label>所属类型</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="14">
            <!-- <nz-input formControlName="discription"  [(ngModel)]="bean.discription"></nz-input> -->
            <nz-select formControlName="discription" nzAllowClear [nzPlaceHolder]="'请选择'" [(ngModel)]="bean.discription" [nzShowSearch]="true"
              name="discription" [nzSize]="'large'">
              <nz-option [nzLabel]="'电脑端'" [nzValue]="'电脑端'" [nzDisabled]="false">
              </nz-option>
              <nz-option [nzLabel]="'手机端'" [nzValue]="'手机端'" [nzDisabled]="false">
              </nz-option>
            </nz-select>
          </div>
          <div nz-form-explain *ngIf="validateForm.controls.discription.dirty&&validateForm.controls.discription.hasError('required')">所属端不能为空!</div>
        </div>
      </div>
      <!--操作类型-->
      <div nz-form-item nz-row>
        <div nz-form-label nz-col [nzSpan]="8">
          <label>操作类型</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="14">
          <div nz-form-control nz-col [nzSm]="14" [nzXs]="14">
            <!-- <nz-input formControlName="discription"  [(ngModel)]="bean.discription"></nz-input> -->
            <nz-select  formControlName="discription" nzAllowClear [nzPlaceHolder]="'请选择'" [(ngModel)]="bean.operateType" [nzShowSearch]="true"
                        name="discription"  (nzOpenChange)="getChange(this)" [nzSize]="'large'">
              <nz-option [nzLabel]="'照片展示'" [nzValue]="'1'" [nzDisabled]="false"></nz-option>
              <nz-option [nzLabel]="'外部链接'" [nzValue]="'2'" [nzDisabled]="false"></nz-option>
              <nz-option [nzLabel]="'资讯详情'" [nzValue]="'3'" [nzDisabled]="false"></nz-option>
              <nz-option [nzLabel]="'内部界面'" [nzValue]="'4'" [nzDisabled]="false"></nz-option>
              <nz-option [nzLabel]="'安卓下载'" [nzValue]="'5'" [nzDisabled]="false"></nz-option>
              <nz-option [nzLabel]="'苹果下载'" [nzValue]="'6'" [nzDisabled]="false"></nz-option>
            </nz-select>
          </div>
          <div nz-form-explain *ngIf="validateForm.controls.discription.dirty&&validateForm.controls.discription.hasError('required')">操作类型不能为空!</div>
        </div>
      </div>
      <!--链接地址-->
      <div nz-form-item nz-row id="link">
        <div nz-form-label nz-col [nzSpan]="8">
          <label>链接地址</label>
        </div>
        <div  nz-col [nzSm]="8" [nzXs]="8">
          <nz-input [nzSize]="'large'" [nzId]="'linkUrl'" [(ngModel)]="bean.linkUrl" name="linkUrl" formControlName="linkUrl" ></nz-input>
        </div>
      </div>
      <!--资讯详情-->
      <div nz-form-item nz-row id="info">
        <div nz-form-label nz-col [nzSpan]="8">
          <label>资讯详情</label>
        </div>
        <div nz-form-control nz-col [nzSm]="8" [nzXs]="8">
          <nz-select  nzAllowClear [(ngModel)]="bean.infoId" [nzPlaceHolder]="'请选择'"
                      [nzShowSearch]="true" formControlName="infoId" name="infoId" [nzSize]="'large'">
            <nz-option  *ngFor="let option of informList" [nzLabel]="option.title"   [nzValue]="option.id"></nz-option>
          </nz-select>
        </div>
    </div>
      <!--上传图片功能-->
      <div nz-form-item nz-row >
        <div nz-form-label nz-col [nzSpan]="8">
          <label>上传图片</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="16">
          <div nz-form-control nz-col [nzSm]="16" [nzXs]="16">
            <nz-upload nzAction="{{config.IP+config.API.upload}}" nzListType="picture-card" [nzShowButton]="fileList.length < 1" [(nzFileList)]="fileList"
              [nzPreview]="handlePreview" [nzRemove]="nzRemoveFile" (nzChange)="handleChange($event)">
              <i class="anticon anticon-plus"></i>
              <div class="ant-upload-text">上传</div>
            </nz-upload>
            <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
              <ng-template #modalContent>
                <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
              </ng-template>
            </nz-modal>
          </div>
        </div>
      </div>
      <!--按钮-->
      <div nz-form-item nz-row>
        <div nz-form-control nz-col [nzOffset]="'9'" [nzSpan]="3">
          <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="submitForm()">添加</button>
        </div>
        <div nz-form-control nz-col [nzSpan]="2">
          <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="quit()">取消</button>
        </div>
      </div>
    </form>
  </div>
</nz-spin>
